// edX: Certificates - Mixins & Extends
// ====================

// utility - font sizing
@mixin font-size($sizeValue: 16){
  font-size: $sizeValue + px;
  font-size: ($sizeValue/10) + rem;
}

// utility - line height
@mixin lh($fontSize: auto){
  line-height: ($fontSize*1.55) + px;
  line-height: (($fontSize/10)*1.55) + rem;
}


// utility - nth-type style clearing
%wipe-first-child {

  &:first-child {
    margin-top: 0;
    margin-left: 0;
    border: none;
    padding-top: 0;
    padding-left: 0;
  }
}

// utility - nth-type style clearing
%wipe-last-child {

  &:last-child {
    margin-bottom: 0;
    margin-right: 0;
    border: none;
    padding-bottom: 0;
    padding-right: 0;
  }
}

// ====================

//  UI - wrapper elements
%ui-wrapper {
  @include clearfix();
  @include box-sizing(border-box);
  width: 100%;
}

// ====================

// UI - lists
%ui-no-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-indent: 0;

  li, dt, dd {
    margin: 0;
    padding: 0;
  }
}

// UI - image-replacement hidden text
%ui-text-hide {
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
}

// UI - hidden elements for screenreaders
%ui-text-sr {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

// UI - text-wrapping
%ui-text-wrap {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

// UI - controls
%ui-fake-link {
  cursor: pointer;
}

%ui-disabled {
  pointer-events: none;
  outline: none;
}

// ====================

// UI - depth levels
%ui-depth0 { z-index: 0; }
%ui-depth1 { z-index: 10; }
%ui-depth2 { z-index: 100; }
%ui-depth3 { z-index: 1000; }
%ui-depth4 { z-index: 10000; }
%ui-depth5 { z-index: 100000; }

// ====================

// UI - transitions
%trans-size {
  @include transition(width 0.25s ease-in-out, height 0.25s ease-in-out);
}

%trans-color {
  @include transition(color 0.25s ease-in-out);
}

// ====================

// UI - cosmetics - shadows
%ui-shadow-up {
  box-shadow: 0 -2px 2px 0 $shadow-d1;
}

%ui-shadow-down {
  box-shadow: 0 2px 2px 0 $shadow-d1;
}

%ui-shadow-subtle-up {
  box-shadow: 0 -2px 2px 0 $shadow-l1;
}

%ui-shadow-subtle-down {
  box-shadow: 0 2px 2px 0 $shadow-l1;
}
